<template>
  <div class="propertyCompany-page">
    <div class="table-container" style="margin-top: 0px">
      <OrderDetails :orderDetails="list.data" />
    </div>
    <div class="table-container">
      <PaymentDetails :orderDetails="table.data" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import OrderDetails from "./orderDetails.vue";
import PaymentDetails from "./paymentDetails.vue";
import { getComDetail, getCparkList } from "../request.js";

const props = defineProps({
  operationId: {
    type: Object,
    default: () => {},
  },
});

const list = reactive({
  data: {},
});

// 表格
const table = reactive({
  data: [],
  loading: true,
});

const getData = async () => {
  table.loading = true;
  await getComDetail(props.operationId.id).then((res) => {
    if (res.data.code === 0) {
      list.data = res.data.result;
    }
  });
  await getCparkList(props.operationId.id).then((res) => {
    if (res.data.code === 0) {
      table.data = res.data.result;
      table.loading = false;
    }
  });
};

getData();

onMounted(() => {
  list.data = props.operationId;
});
</script>

<style lang="less" scoped>
.table-container {
  margin-top: 16px;
  min-height: 100%;
  // padding: 24px;
  background: #fff;
  border-radius: 6px;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>
